<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        border: 10px solid springgreen;
        float: left;
        /* display: inline-block; 脱离文档流默认被子元素撑开 */
        /* overflow: hidden; */
      }
      .inner {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        float: left;
      }
      .box1 {
        width: 300px;
        height: 300px;
        background-color: orange;
      }

      /* 
        高度塌陷
          在浮动布局中,父元素默认被子元素撑开的，
            当子元素浮动后，其完全脱离文档流，将无法撑开父元素，导致父元素高度丢失
             父元素高度丢失后，其下元素会上移，导致页面布局混乱
      */

      /* 
        BFC(Block Formatting Context) 块级格式化环境
          BFC是一个css中的一个隐含的属性，可以为元素开启BFC
          开启BFC该元素会变成一个独立的布局区域
        
        开启BFC的特点：
          1.开启BFC的元素不会被浮动元素所覆盖
          2.开启BFC的元素的子元素和父元素的外边距不会重叠
          3.开启BFC的元素可以包含浮动的子元素
        
        如何开启BFC
          1.设置浮动(不推荐)
          2.将元素设置为行内快元素（不推荐）
          3.将元素的overflow设置为非visible的值
            常用的方式为给元素设置overflow：hidden 开启BFC让其可以包含浮动的元素
      */
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
    <div class="box1"></div>
  </body>
</html>
